<template>
  <view class="page-container" :class="themeClass">
    <!-- 自定义导航栏 -->
    <CustomNavBar 
      title="关于我们" 
      :show-back="true"
    />
    
    <!-- 页面内容 -->
    <view class="page-content">
      <scroll-view scroll-y class="about-scroll">
        <!-- Logo区域 -->
        <view class="logo-section">
          <image 
            src="/static/logo.png" 
            mode="aspectFit"
            class="app-logo"
          />
          <text class="app-name">每日记</text>
          <text class="app-slogan">记录生活，留住美好</text>
          <text class="app-version">版本 1.0.0</text>
        </view>
        
        <!-- 应用介绍 -->
        <view class="intro-section">
          <view class="section-title">
            <text class="title-text">应用介绍</text>
          </view>
          <text class="intro-text">
            每日记是一款简洁优雅的日记应用，帮助您记录生活中的点点滴滴。支持分类管理、标签系统、心情记录、统计分析等功能，让您的回忆更有条理。
          </text>
        </view>
        
        <!-- 公司信息 -->
        <view class="company-section">
          <view class="section-title">
            <text class="title-text">公司信息</text>
          </view>
          
          <view class="info-list">
            <view class="info-item">
              <view class="info-icon">
                <text class="icon-text">🏢</text>
              </view>
              <view class="info-content">
                <text class="info-label">公司名称</text>
                <text class="info-value">渲科网络科技（郑州）有限公司</text>
              </view>
            </view>
            
            <view class="info-item" @click="makePhoneCall">
              <view class="info-icon">
                <text class="icon-text">📞</text>
              </view>
              <view class="info-content">
                <text class="info-label">联系电话</text>
                <text class="info-value phone-number">13673998901</text>
                <text class="info-desc">（微信同号）</text>
              </view>
            </view>
            
            <view class="info-item" @click="copyWechat">
              <view class="info-icon">
                <text class="icon-text">💬</text>
              </view>
              <view class="info-content">
                <text class="info-label">微信联系</text>
                <text class="info-value wechat-number">13673998901</text>
                <text class="info-desc">点击复制微信号</text>
              </view>
            </view>
          </view>
        </view>
        
        <!-- 功能特色 -->
        <view class="features-section">
          <view class="section-title">
            <text class="title-text">功能特色</text>
          </view>
          
          <view class="features-grid">
            <view class="feature-item">
              <text class="feature-icon">📝</text>
              <text class="feature-title">日记记录</text>
              <text class="feature-desc">支持富文本编辑，记录生活点滴</text>
            </view>
            
            <view class="feature-item">
              <text class="feature-icon">📂</text>
              <text class="feature-title">分类管理</text>
              <text class="feature-desc">灵活的分类系统，让内容更有序</text>
            </view>
            
            <view class="feature-item">
              <text class="feature-icon">🏷️</text>
              <text class="feature-title">标签系统</text>
              <text class="feature-desc">多维度标签，快速定位回忆</text>
            </view>
            
            <view class="feature-item">
              <text class="feature-icon">😊</text>
              <text class="feature-title">心情记录</text>
              <text class="feature-desc">记录每天的心情变化</text>
            </view>
            
            <view class="feature-item">
              <text class="feature-icon">📊</text>
              <text class="feature-title">统计分析</text>
              <text class="feature-desc">可视化数据，了解写作习惯</text>
            </view>
            
            <view class="feature-item">
              <text class="feature-icon">🌙</text>
              <text class="feature-title">深色模式</text>
              <text class="feature-desc">护眼模式，夜间使用更舒适</text>
            </view>
          </view>
        </view>
        
        <!-- 联系我们 -->
        <view class="contact-section">
          <view class="section-title">
            <text class="title-text">联系我们</text>
          </view>
          <text class="contact-text">
            如果您在使用过程中遇到任何问题或有建议，欢迎通过以下方式联系我们：
          </text>
          
          <view class="contact-actions">
            <button class="contact-btn" @click="makePhoneCall">
              <text class="btn-icon">📞</text>
              <text class="btn-text">拨打电话</text>
            </button>
            
            <button class="contact-btn" @click="copyWechat">
              <text class="btn-icon">💬</text>
              <text class="btn-text">复制微信</text>
            </button>
          </view>
        </view>
        
        <!-- 版权信息 -->
        <view class="copyright-section">
          <text class="copyright-text">© 2024 渲科网络科技（郑州）有限公司</text>
          <text class="copyright-text">All Rights Reserved</text>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import { useUserStore } from '@/store/user'
import CustomNavBar from '@/components/CustomNavBar.vue'

export default {
  name: 'AboutPage',
  components: {
    CustomNavBar
  },
  setup() {
    const userStore = useUserStore()
    return {
      userStore
    }
  },
  data() {
    return {
      navBarHeight: 88
    }
  },
  computed: {
    isDark() {
      return this.userStore.themeMode === 'dark'
    },
    
    themeClass() {
      return this.isDark ? 'theme-dark' : 'theme-light'
    }
  },
  onLoad() {
    this.initPage()
  },
  methods: {
    initPage() {
      // 获取导航栏高度
      const systemInfo = uni.getSystemInfoSync()
      this.navBarHeight = systemInfo.statusBarHeight + 44
    },
    
    // 拨打电话
    makePhoneCall() {
      uni.makePhoneCall({
        phoneNumber: '13673998901',
        success: () => {
          console.log('调用拨号功能成功')
        },
        fail: (err) => {
          console.error('拨号失败:', err)
          uni.showToast({
            title: '拨号失败',
            icon: 'none'
          })
        }
      })
    },
    
    // 复制微信号
    copyWechat() {
      uni.setClipboardData({
        data: '13673998901',
        success: () => {
          uni.showToast({
            title: '微信号已复制',
            icon: 'success'
          })
        },
        fail: () => {
          uni.showToast({
            title: '复制失败',
            icon: 'none'
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.page-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  transition: background-color 0.3s ease;
}

.page-content {
  padding: 0 32rpx;
  padding-top: calc(var(--status-bar-height, 44rpx) + 88rpx + 32rpx);
  min-height: calc(100vh - calc(var(--status-bar-height, 44rpx) + 88rpx));
}

.about-scroll {
  height: calc(100vh - calc(var(--status-bar-height, 44rpx) + 88rpx));
}

.logo-section {
  text-align: center;
  padding: 60rpx 0;
  background-color: #ffffff;
  border-radius: 24rpx;
  margin-bottom: 40rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}

.app-logo {
  width: 160rpx;
  height: 160rpx;
  border-radius: 32rpx;
  margin-bottom: 24rpx;
}

.app-name {
  font-size: 48rpx;
  font-weight: bold;
  color: #333333;
  display: block;
  margin-bottom: 12rpx;
}

.app-slogan {
  font-size: 28rpx;
  color: #666666;
  display: block;
  margin-bottom: 16rpx;
}

.app-version {
  font-size: 24rpx;
  color: #999999;
  background-color: #f0f0f0;
  padding: 8rpx 16rpx;
  border-radius: 12rpx;
  display: inline-block;
}

.intro-section,
.company-section,
.features-section,
.contact-section {
  background-color: #ffffff;
  border-radius: 24rpx;
  padding: 40rpx;
  margin-bottom: 40rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}

.section-title {
  margin-bottom: 32rpx;
}

.title-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
}

.intro-text {
  font-size: 28rpx;
  line-height: 1.6;
  color: #666666;
}

.info-list {
  display: flex;
  flex-direction: column;
  gap: 32rpx;
}

.info-item {
  display: flex;
  align-items: flex-start;
  gap: 24rpx;
  padding: 24rpx;
  background-color: #f8f9fa;
  border-radius: 16rpx;
  transition: all 0.3s;
}

.info-item:active {
  background-color: #e9ecef;
  transform: scale(0.98);
}

.info-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 16rpx;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.icon-text {
  font-size: 32rpx;
}

.info-content {
  flex: 1;
}

.info-label {
  font-size: 24rpx;
  color: #999999;
  display: block;
  margin-bottom: 8rpx;
}

.info-value {
  font-size: 30rpx;
  color: #333333;
  font-weight: 500;
  display: block;
  margin-bottom: 4rpx;
}

.phone-number,
.wechat-number {
  color: #1890ff;
  font-weight: bold;
}

.info-desc {
  font-size: 24rpx;
  color: #999999;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24rpx;
}

.feature-item {
  text-align: center;
  padding: 32rpx 16rpx;
  background-color: #f8f9fa;
  border-radius: 16rpx;
}

.feature-icon {
  font-size: 48rpx;
  display: block;
  margin-bottom: 16rpx;
}

.feature-title {
  font-size: 28rpx;
  font-weight: 500;
  color: #333333;
  display: block;
  margin-bottom: 12rpx;
}

.feature-desc {
  font-size: 24rpx;
  color: #666666;
  line-height: 1.4;
}

.contact-text {
  font-size: 28rpx;
  line-height: 1.6;
  color: #666666;
  margin-bottom: 32rpx;
}

.contact-actions {
  display: flex;
  gap: 24rpx;
}

.contact-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
  padding: 24rpx;
  background-color: #1890ff;
  color: #ffffff;
  border: none;
  border-radius: 16rpx;
  font-size: 28rpx;
  font-weight: 500;
}

.contact-btn::after {
  border: none;
}

.contact-btn:active {
  background-color: #0d7cd6;
  transform: scale(0.98);
}

.btn-icon {
  font-size: 24rpx;
}

.btn-text {
  font-size: 28rpx;
}

.copyright-section {
  text-align: center;
  padding: 40rpx;
  margin-bottom: 40rpx;
}

.copyright-text {
  font-size: 24rpx;
  color: #999999;
  line-height: 1.6;
  display: block;
}

/* 主题适配 */
.theme-light.page-container {
  background-color: #f5f5f5 !important;
}

.theme-dark.page-container {
  background-color: #1e1e1e !important;
}

.theme-dark .logo-section,
.theme-dark .intro-section,
.theme-dark .company-section,
.theme-dark .features-section,
.theme-dark .contact-section {
  background-color: #252526 !important;
}

.theme-dark .title-text {
  color: #e8e8e8 !important;
}

.theme-dark .app-name {
  color: #e8e8e8 !important;
}

.theme-dark .app-slogan {
  color: #b3b3b3 !important;
}

.theme-dark .app-version {
  background-color: #404040 !important;
  color: #b3b3b3 !important;
}

.theme-dark .intro-text,
.theme-dark .contact-text {
  color: #b3b3b3 !important;
}

.theme-dark .info-item,
.theme-dark .feature-item {
  background-color: #2d2d30 !important;
}

.theme-dark .info-item:active {
  background-color: #404040 !important;
}

.theme-dark .info-icon {
  background-color: #404040 !important;
}

.theme-dark .info-label,
.theme-dark .info-desc {
  color: #8c8c8c !important;
}

.theme-dark .info-value {
  color: #e8e8e8 !important;
}

.theme-dark .phone-number,
.theme-dark .wechat-number {
  color: #1890ff !important;
}

.theme-dark .feature-title {
  color: #e8e8e8 !important;
}

.theme-dark .feature-desc {
  color: #b3b3b3 !important;
}

.theme-dark .copyright-text {
  color: #b3b3b3 !important;
}
</style> 